<template>
  <div style="height: 100%">
    <scroll ref="screenTop" style="height: 100%" :bounce="true">
      <div>
        <div class="topImg" :style="{height: topImgHeight}">
          <div :style="{height: imgBackgroundHeight}" class="imgBackgroundBorder" v-lazy:background-image="user.backgroundImageUrl || imageTopBackround">
          </div>
          <div class="content">
            <!-- 头像 -->
            <div class="headContent" @click="handleArchives" :style="{backgroundImage:`url(${user.headUrl || headerimage})`}"></div>
            <!-- 昵称加上签名 -->
            <div>
              <div class="headName">
                <span>{{user.nickname || '会员' + user.phoneNum}}</span>
                <div>
                  <img slot="icon" :src="boyImage" style="width: 16px; height: 16px; margin-left:5px;margin-top:4px" v-if="user.sex == '1'">
                  <img slot="icon" :src="girlImage" style="width: 16px; height: 16px; margin-left:5px;margin-top:4px" v-else>
                </div>
              </div>

              <div class="authorized">
                <p>{{user.signature || user.signatureDesc || '这个家伙很懒，什么都没有留下'}}</p>
              </div>
            </div>
          </div>

          <!-- 粉丝和关注 -->
          <div class="focusFansWrapper" :style="{top: topHeight}">
            <p @click="myFocus">
              <span>{{$t('btn.focus')}}</span><span class="myFocesWrapper">{{focus}}</span>
            </p>
            <p @click="myFans">
              <span class="myFansWrapper">{{$t('btn.fans')}}</span><span class="myFansContent">{{fans}}</span>
            </p>
          </div>

        </div>

        <!-- 旅行的意义 -->
        <div class="order travleMeaning" >
           <div class="myOrder">
              <div class="myOrderLine">
              </div>
              <div class="myOrderText">
                <p>{{$t('tab.iCareAbout')}}</p>
              </div>
          </div>
          <grid>
            <grid-item :label="$t('tab.myCollection')" @on-item-click="handleCollection()">
              <img slot="icon" :src="collectionImage">
            </grid-item>
            <grid-item :label="$t('tab.myBrowse')" @on-item-click="handleBrowse()">
              <img slot="icon" :src="browseImage">
            </grid-item>
            <grid-item :label="$t('tab.myTravels')" @on-item-click="handleFriends()">
              <img slot="icon" :src="friendImage">
            </grid-item>
            <grid-item :label="$t('tab.myPublish')" @on-item-click="handlePraise()">
              <img slot="icon" :src="favoriteImage">
            </grid-item>
          </grid>
        </div>

        <div class="list">
          <!-- 消息、购物车、在线客服 -->
          <div class="groupOne">
            <cell is-link  @click.native="handleMyMessage">
              <div  slot="icon" :style="{backgroundImage:`url(${messageImage})`}" class="iconDeal">
              </div>
              <span slot="title" class="cellTitle">{{$t('btn.message')}} <badge v-show="(noticeNum + unreadChatCount) > 0" :text="(noticeNum + unreadChatCount) > 99 ? 99 : (noticeNum + unreadChatCount)"></badge></span>
            </cell>

          </div>
          <!-- 联系我们、关于我们 -->
          <div class="groupTwo">
            <cell is-link @click.native="handleAbout">
              <div  slot="icon" :style="{backgroundImage:`url(${aboutUsImage})`}" class="iconDeal">
              </div>
              <span slot="title" class="cellTitle">{{$t('btn.aboutUs')}}</span>
            </cell>
          </div>
        </div>
        <div class="bottomDiv" style="height: 10px">
        </div>
      </div>
    </scroll>
    <actionsheet v-model="showPhone" :menus="menusPhone" @on-click-menu="handleClickMenu" show-cancel></actionsheet>

    <keep-alive :include="['MessageList', 'Order']">
      <router-view />
    </keep-alive>
  </div>
</template>

<script>
import { localUser } from '@/assets/js/local'
import axios from '@/api/axiosApi'
import personalIconSetImage from '@/assets/img/myhome/personal_icon_set.png'
import personalIconEditImage from '@/assets/img/myhome/personal_icon_edit.png'
import imageTop from '@/assets/img/default_avatar.png'
import imageTopBackround from '@/assets/img/myhome/my_top.png'
import waitImage from '@/assets/img/myhome/wait.png'
import cancelImage from '@/assets/img/myhome/cancel.png'
import failImage from '@/assets/img/myhome/fail.png'
import shoppingImage from '@/assets/img/myhome/shopping.png'
import receiptImage from '@/assets/img/myhome/receipt.png'

import collectionImage from '@/assets/img/myhome/collection.png'
import browseImage from '@/assets/img/myhome/browse.png'
import favoriteImage from '@/assets/img/myhome/favorite.png'
import friendImage from '@/assets/img/myhome/friend.png'

import messageImage from '@/assets/img/message.png'
import connectUsImage from '@/assets/img/connect_us.png'
import aboutUsImage from '@/assets/img/about_us.png'
import customerServiceImage from '@/assets/img/customer_service.png'

import boyImage from '@/assets/img/myhome/boy.png'
import girlImage from '@/assets/img/myhome/girl.png'

import Scroll from '@/components/scroll/scroll'
import { Grid, GridItem, Cell, CellBox, Group, Badge, XDialog, Actionsheet, XButton } from 'vux'
import { mapGetters } from 'vuex'
import { handleBackMixin } from '@/assets/js/mixin'
import { isIphoneX, isIOS } from '@/assets/js/brower'

export default {
  name: 'User',
  mixins: [handleBackMixin],
  data () {
    return {
      personalIconEditImage: personalIconEditImage,
      personalIconSetImage: personalIconSetImage,
      boyImage: boyImage,
      girlImage: girlImage,
      receiptImage: receiptImage,
      connectUsImage: connectUsImage,
      aboutUsImage: aboutUsImage,
      customerServiceImage: customerServiceImage,
      messageImage: messageImage,
      collectionImage: collectionImage,
      browseImage: browseImage,
      favoriteImage: favoriteImage,
      friendImage: friendImage,
      waitImage: waitImage,
      cancelImage: cancelImage,
      failImage: failImage,
      headerimage: imageTop,
      shoppingImage: shoppingImage,
      imageTopBackround: imageTopBackround,
      menusPhone: {
        menu1: '拨打官方电话 8888888',
        menu2: '拨打投诉电话 1827527847'
      },
      showPhone: false,
      focus: '0',
      fans: '0',
      user: {},
      noticeNum: 0,
      ifMesssage: false,
      shoppingNum: 0,
      allDisabledBack: true,
      allPopupModels: ['showPhone'],
      lableColor: 'red',
      topImgHeight: '230px',
      imgBackgroundHeight: '230px',
      topHeight: '154px'
    }
  },
  created () {
    this.user = localUser.get() || {}
    if (isIphoneX()) {
      this.paddingTop = 34
    } else {
      this.paddingTop = 24
    }
    if (this.user.id != null) {
      this.getFocusAndFansCount(this.user.id)
      this.getOtherBaseInfo()
      this.handleGetNoticeNum()
      this.handleGetShoppingNum()
    }
  },
  activated () {
    this.user = localUser.get() || {}
    if (typeof this.user.id !== 'undefined') {
      this.getFocusAndFansCount(this.user.id)
      this.getOtherBaseInfo()
      this.handleGetNoticeNum()
      this.handleGetShoppingNum()
    }
  },
  computed: {
    ...mapGetters([
      'unreadChatCount'
    ])
  },
  methods: {
    getFocusAndFansCount (userId) {
      axios.get(this, '/v1/userInfo/' + userId, null, (data) => {
        this.focus = data.followingCount
        this.fans = data.followerCount
        if (typeof data.headUrl !== 'undefined') {
          sessionStorage.setItem('headUrl', data.headUrl)
        }
      }, null, false)
    },
    login () {
      this.$router.push('/login')
    },
    handleOrderGoto (id) {
      this.$router.push('/user/order')
      this.$store.commit('SET_ORDER_TAB', id)
    },
    handleAbout () {
      this.$router.push('/user/about')
    },
    handleCollection () {
      this.$router.push('/user/collection')
      this.$store.commit('SET_COLLECTION_TAB', 0)
    },
    handleBrowse () {
      this.$router.push('/user/browse')
      this.$store.commit('SET_BROWSE_TAB', 0)
    },
    handleArchives () {
      this.$router.push('/user/archives' + '/' + this.user.id)
    },
    handleConnect () {
      this.showPhone = true
    },
    handleClickMenu (value) {
      if (value === 'menu1') {
        window.location.href = 'tel://8888888'
      } else if (value === 'menu2') {
        window.location.href = 'tel://182752778747'
      }
    },
    handleMyMessage () {
      this.$router.push('/user/messageList')
    },
    myFocus () {
      this.$router.push('/user/focus/' + this.user.id)
    },
    myFans () {
      this.$router.push('/user/fans/' + this.user.id)
    },
    handleClickToLogin () {
      this.$router.push('/login')
    },
    waitDecelop () {
      this.$router.push('/chatAI')
    },
    // handleOrderGotoQuitServer (id) {
    //   this.$router.push('/user/orderquitserver')
    //   this.$store.commit('SET_QUITORDER_TAB', id)
    // },
    handleFriends () {
      this.$router.push('/user/friends')
    },
    handlePraise () {
      this.$router.push('/user/praise')
      this.$store.commit('SET_PRAISE_TAB', 0)
    },
    // 获取未读的通知数量
    handleGetNoticeNum () {
      axios.get(this, '/v1/notification/notReadCount/' + this.user.id, null, (data) => {
        this.noticeNum = data
      })
    },
    // 获取购物车数量
    handleGetShoppingNum () {
      axios.get(this, '/v1/shoppingCart/' + this.user.id, null, (data) => {
        this.shoppingNum = data.length
      })
    },
    getOtherBaseInfo () {
      axios.get(this, '/v1/userInfo/' + this.user.id, null, (data) => {
        this.user = data
        localUser.set(this.user)
      })
    }
  },
  components: {
    Scroll,
    Grid,
    GridItem,
    Cell,
    CellBox,
    Group,
    Badge,
    XDialog,
    Actionsheet,
    XButton,
    isIphoneX,
    isIOS
  },
  watch: {
    '$route' (to, from) {
      if (to.name === 'User') {
        this.user = localUser.get() || {}
        this.handleGetNoticeNum()
        this.handleGetShoppingNum()
        if (typeof this.user.id !== 'undefined') {
          this.getFocusAndFansCount(this.user.id)
        }
      }
    }
  }
}
</script>

<style scoped  lang="stylus" rel="stylesheet/stylus">
  @import '~@/assets/css/variable.styl'

  .topImg {
    width 100%
    position relative
    background: rgba(57, 57, 57, 0.3)
    .imgBackgroundBorder{
      position: absolute
      top: 0
      left: 0
      right: 0
      bottom: 0
      overflow hidden
      z-index -1
      width 100%
      background-size: cover
      background-repeat: no-repeat
    }
    .content {
        display flex
        padding-left 15px
        padding-right 15px
        padding-top 50px
        padding-bottom 16px
        .headContent {
          width 90px
          height 90px
          border-radius 50%
          background-repeat: no-repeat
          background-size: cover
        }
        .headName {
          margin-top 20px
          display flex
          margin-left 10px
          span {
            font-weight bold
            color #fefefe
            font-size 15px
          }
        }
        .authorized {
          margin-top 3px
          margin-left 10px
          p {
            color #fefefe
            font-size 10px
          }
        }
      }
      .focusFansWrapper {
        display flex
        position absolute
        left 15px
        span {
          color #fefefe
          font-size 12px
        }
        .myFansWrapper {
          margin-left 16px
        }
        .myFocesWrapper {
          margin-left 4px
        }
        .myFansContent {
          margin-left 4px
        }
      }
    .setting{
      position absolute
      top 40px
      right 10px
      height 30px
      border 0
    }
  }

.order {
  background-color:white
}

.clickToLogin {
  border 1px solid $color-border
  border-radius 2px
  padding 4px 12px
  color $color-white
  background none
  width 100px
}

.loginButtonDiv {
  position:absolute;
  top:100px;
  left:0px;
  width: 100%;
  text-align:center
}

.editButtonDiv {
  position:absolute;
  top:206px;
  right: 15px;
  text-align:center
  .editInfo {
  border 1px solid $color-border
  border-radius 2px
  padding 4px 4px
  color $color-white
  background none
  width 90px
}
}

.settingButton {
    img {
      width 25px
      height 25px
    }
    position:absolute;
    top 40px
    right 15px
}

.lineWrapper {
  color: $color-theme;
  margin-right: 5px;
}

.topLine {
  color: white;
  opacity: 0.5
}

.list {
  .groupOne {
    background-color white
    margin-top 10px
  }
  .groupTwo {
    background-color white
    margin-top 10px
  }
}

.myOrder {
  display flex
  padding 10px 15px
  .myOrderLine {
    margin-top 4px
    margin-right 8px
    width 4px
    height 17px
    border-radius 3px
    background-color #00CEB9
  }
  .myOrderText {
    font-weight bold
    color #333333
    font-size 15px
  }
}

.travleMeaning {
  margin-top 10px
}

.iconDeal {
  width:21px;
  height:20px;
  background-repeat: no-repeat;
  background-size: cover;
  margin-right:12px;
}

.iconDealConact {
  width:21px;
  height:21px;
  background-repeat: no-repeat;
  background-size: cover;
  margin-right:12px;
}

.editImage {
  position absolute
  text-align center
  left 86px
  top 117px
  width 17px
  height 17px
  background-color white
  border-radius 50%
  img {
    margin-bottom 4px
    width 9px
    height 12px
  }
}
.cellTitle {
  color #666666
  font-size 15px
  font-weight bold
}
</style>

<style>
.order .weui-grid__icon + .weui-grid__label {
  margin-top: 12px;
  font-size: 12px;
}

.order .weui-grid__icon {
  width: 27px;
  height: 30px;
}

</style>
